<template>

  <div class="global f-j-b hp100">
    <div class="left flex  hp100 flex-col" style="flex:2;border:1px solid #ff0000">
      <div class=" flex  " style="height:200px;border:1px solid #ff0000">
          <div class="" style="flex:2;border:1px solid #ff0000">
            2个摄像头


          </div>
          <div class="" style="flex:2;border:1px solid #ff0000">
            输入日志内容


          </div>
      </div>
      <div class="" style="height:200px;border:1px solid #ff0000">
        状态输出
      </div>

    </div>
<!--    <div class="middle"><mapGlobal ref="refMapGlobal" /></div>-->
    <div class="right flex  flex-col"  style="flex:1;border:1px solid #ff0000">
      <div class="" style="flex:2;border:1px solid #ff0000">
        <div class="" style="flex:2;border:1px solid #ff0000">
          疲劳检测


        </div>
        <div class="" style="flex:2;border:1px solid #ff0000">
          闭眼检测


        </div>
        <div class="" style="flex:2;border:1px solid #ff0000">
          打哈欠检测


        </div>


      </div>
      <div class="" style="flex:2;border:1px solid #ff0000">
        <div class="" style="flex:2;border:1px solid #ff0000">
          开始检测


        </div>
        <div class="" style="flex:2;border:1px solid #ff0000">
          停止检测


        </div>


      </div>
    </div>
  </div>s


</template>

<script setup name="Index">
// @ is an alias to /src
import header from "@/components/layout/header";


const version = ref('4.8.2')

function goTarget(url) {
  window.open(url, '__blank')
}
</script>

<style scoped lang="scss">

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>



<style lang="scss" scoped>
.global {
 color:#fff;
  //height: 100%;
  //min-height: calc(100% - 50px);
  width: 100%;
  display: flex;
  .left {
    // border:1px solid #ff0000;
    width: 23%;
    min-width: 180px;
  }
  .middle {
    width: 100%;
  }
  ul.right {
    width: 20%;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    li {
      height: 32%;
      background-color: rgba(3, 26, 64, 0.6);
      padding: 15px;
      box-sizing: border-box;
    }
  }
}
</style>

